<template>
  <div class="right">
    <div class="name">
      {{ nickName }}
    </div>
    <el-col :span="12">
      <div class="demo-basic--circle">
        <el-dropdown
          trigger="click"
          @command="handleCommand"
          :hide-on-click="false"
        >
          <span class="el-dropdown-link">
            <!-- Dropdown List<i class="el-icon-arrow-down el-icon--right"></i> -->
            <!-- <div class="block"> -->
            <el-avatar :size="50" :src="userAvatar"></el-avatar>
            <!-- </div> -->
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <ls-drop-down-menu :config="setting">
                <template #popconfirm="scope">
                  <pop-confirm
                    :popConfirmConfig="logoutConfig"
                    :name="scope.row.name"
                    style="display: inline-block"
                    v-if="scope.row.name"
                  >
                  </pop-confirm>
                </template>

                <template #dropdownMenu="scope">
                  <ls-dialog
                    v-if="scope.row.name"
                    :name="scope.row.name"
                    :dialogTitleConfig="dialogTitleConfig"
                    @dialogConfirm="dialogConfirm"
                  >
                    <!-- <template #title>
                    </template> -->

                    <template #default>
                      <middle-dialog ref="formDataRef"></middle-dialog>
                    </template>

                    <!-- <template #footer>
                      <span>222</span>
                    </template> -->
                  </ls-dialog>
                </template>
              </ls-drop-down-menu>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, defineProps } from "vue"
import { useRouter } from "vue-router"
import { newUseStore } from "@/store"
import { IUserSetting } from "../config/userSetting"
import { popConfirmConfig, IPopConfirmConfig } from "@/baseUI/popConfirm"
import PopConfirm from "@/baseUI/popConfirm/src/index.vue"
import CacheLocal from "@/utils/cacheLocal"
import { LsDropDownMenu } from "@/baseUI/dropdownMenu"
import { LsDialog } from "@/baseUI/dialog"
import { RightDialogTitle, MiddleDialog } from "./rightCps"
import { dialogTitleConfig } from "./rightCps/config"

const props = defineProps({
  user: {
    type: Object,
    default: () => ({})
  },
  avatar: {
    type: String,
    default:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
  },
  userSetting: {
    type: Array,
    default: () => []
  }
})

const router = useRouter()
const store = newUseStore()
const userAvatar = computed(() => store.state.moduleUser.userInfo.avatar)
const nickName = computed(() => store.state.moduleUser.userInfo.nickName)
// const setting = computed(() =>[ ...props.userSetting ])
const setting = computed(() => [...(props.userSetting as IUserSetting[])])

const handleCommand = (commad: IUserSetting) => {
  console.log(commad)
}
const visible = ref(false)
const pop = () => (visible.value = !visible.value)

//退出登录
const logout = () => {
  console.log("退出")
  CacheLocal.removeItem("LSToken")
  CacheLocal.removeItem("LSUserInfo")
  router.push("/login")
}
//确认弹框配置

const logoutConfig: IPopConfirmConfig = {
  ...popConfirmConfig,
  title: "确认退出登录吗？",
  // confirmFn: logout.bind(popConfirmConfig)
  confirmFn: logout
}
const dialogVisible = ref(false)
const formDataRef = ref(null)
//dialog得确认提交
const dialogConfirm = () => {
  console.log("dialogConfirm提交了", formDataRef.value)
  // store.dispatch("moduleUser/updateUser")
  console.log("111", store.lsActions.moduleUser.updateUser())

  store.dispatch(store.lsActions.moduleUser.updateUser())
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.right {
  display: flex;
  align-items: center;
  .name {
    margin-right: 1vw;
  }
}
</style>
